<style lang="scss" scoped>
  @import '@/assets/css/variable';
  .search{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background-color: white;
    .leftPart{
      flex:1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: $main-bgc;
      border-radius: 16px;
      height: 32px;
      .leftPartLeft{
        flex: 1;
        display: flex;
        align-items: center;
        .icon{
          flex: 0 0 18px;
          margin-left: 20px;
          i{
            font-size: 14px;
            color:$color2;
          }
          img{
            width: 18px;
            height: 18px;
            object-fit: cover;
          }
        }
        .line{
          flex: 0 0 3px;
          height: 14px;
          margin-left: 4px;
          // padding-bottom: 3px;
          img{
            height: 14px;
          }
          i{
            font-size: 14px;
            color:$color2;
          }
        }
        .input{
          flex: 1;
          margin-left: 8px;
          border: 0; // 去除未选中状态边框
          outline: none; // 去除选中状态边框
          background-color: rgba(0, 0, 0, 0);// 透明背景
        }
      }
      .leftPartRight{
        flex: 0 0 32px;
        display: flex;
        align-items: center;
        justify-content: space-around;
      }
    }
    .rightPart{
      flex: 0 0 42px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      color: $mainColor;
      font-size: 14px;
    }
  }
</style>
<template>
  <div class="search">
    <div class="leftPart">
      <div class="leftPartLeft">
        <div class="icon">
          <!-- <img src="../assets/img/search.png" alt=""> -->
          <i class="iconfont iconfont-search"></i>
        </div>
        <div class="line">
          <!-- <img src="../assets/img/line.svg" alt=""> -->
          <i class="iconfont iconfont-line"></i>
        </div>
        <input class="input" v-model="value" :placeholder="searchTitle" />
      </div>
      <div class="leftPartRight">
        <van-icon name="clear" size="14" color="#B3B5B9" @click="onReset"/>
      </div>
    </div>
    <div class="rightPart" @click="onSearch">搜索</div>
  </div>
</template>
<script>
export default {
  components: {
  },
  data() {
    return {
      value: ''
    };
  },
  props: ['searchTitle'],
  mounted() {
    const _this = this;
  },
  methods: {
    onSearch() {
      console.log('输出value',this.value);
      this.$emit('search',this.value)
    },
    onReset() {
      this.value = ''
      this.$emit('search',this.value)
    },
  },
};
</script>
